<style lang="scss" scoped>
.table {
    width: 100%;
    display: flex;
    justify-content: center;
}

.block {
    margin-top: 16px;
}
</style>
<template>
    <div>
        品牌管理
        <p style="margin-left: 100px;"><el-button type="">添加品牌</el-button></p>
        <el-form :model="search" label-width="100px"
            style="display: flex ; margin:16px 0;align-items:center; backgroundColor:rgb(243,243,243); padding:16px 0"
            ref="searchForm">
            <el-form-item label="中文名" prop="brandcname" style="margin-bottom: 0;">
                <el-input placeholder="中文名" v-model="search.brandcname" style="width: 260px;"></el-input>
            </el-form-item>
            <el-form-item label="英文名" prop="brandename" style="margin-bottom: 0;">
                <el-input placeholder="英文名" v-model="search.brandename" style="width: 260px;"></el-input>
            </el-form-item>
            <el-button type="" style="margin: 0 0 0 36px ;" @click="search.current = 1; getBrandList() ">查询</el-button>
            <el-button style="margin: 0 0 0 36px ;" @click="resetForm('searchForm')">重置</el-button>
        </el-form>
        <el-table :data="brandList" style="width: 60%" border>
            <el-table-column prop="id" label="品牌编码">
            </el-table-column>
            <el-table-column prop="brandcname" label="品牌名称(中文)">
            </el-table-column>
            <el-table-column prop="brandename" label="品牌名称(英文)">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                    <el-button @click="$router.push('/admin/produce/brand/'+ scope.row.id)" type="text" size="small">编辑</el-button>
                    <el-button type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page.sync="pagnation.current" :page-sizes="[5, 10, 15]" :page-size="pagnation.size"
                layout="total, sizes, prev, pager, next, jumper" :total="pagnation.total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
import { BrandList } from '@/api/brand';
export default {
    data() {
        return {
            brandList: [],
            search: {
                size: 10,
                current: 1,
                brandcname: "",
                brandename: "",
            },
            pagnation: {},
        }
    },
    created() {
        this.getBrandList()
    },
    methods: {
        // handleClick(row) {
        //     console.log(row);
        // },
        // 重置表单
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.getBrandList();
        },
        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
            this.search.size = val;
            this.getBrandList()
        },
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            this.search.current = val;
            this.getBrandList()
        },
        getBrandList() {
            var search = {};
            for (var k in this.search) {
                if (this.search[k]) {
                    search[k] = this.search
                }
            }
            BrandList(this.search)
                .then(res => {
                    this.brandList = res.data.data;
                    this.pagnation = res.data.pagnation
                    this.pagnation.current = this.pagnation.current * 1;
                    this.pagnation.size = this.pagnation.size * 1;
                })
        }
    }
}
</script>